<template>
    <div class="search-popup">
        <van-search
        v-model="searchVal"
        show-action
        :placeholder="placeVal"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
  />
  <!-- 底下展示3个页面之一,但不涉及路由跳转,做成组件 -->
  <HistoryHot v-if="bolckShow==1"
    :hotKeywordList="hotKeywordList"
    :historyKeywordList="historyKeywordList"
    @tagClick="tagClick"
  />
  <SerachTips v-else-if="bolckShow==2" :serachlist="serachlist" @tagClick="tagClick"/>

  <SerachResult v-else-if="bolckShow==3" 
    :goodsList="goodsList" 
    :filterCategory="filterCategory" 
    @chanCategory="chanCategory" 
    @chanPrice="chanPrice"/>
    </div>
</template>

<script>
// 引入3个组件
import HistoryHot from "../components/serach/HistoryHot"
import SerachTips from "../components/serach/SerachTips"
import SerachResult from "../components/serach/SerachResult"

import {mapMutations} from "vuex"
import {getHishotData,getTipsData,getGoodsList} from "@/request/api"
export default {
    data () {
        return {
            searchVal:"",
            placeVal:"",
            // 控制展示哪个页面
            bolckShow:1,
            // 热门搜索
            hotKeywordList:[],
            // 历史记录
            historyKeywordList:[],
            // 相关
            serachlist:[],
            // 搜索结果
            goodsList:[],
            filterCategory:[],
            // 分类和排序
            order: "desc",
            sort: "id",
            categoryId: 0,
            timer:null
        }
    },
    
    methods:{
        ...mapMutations({
        chanShadow:"showShadow/chanShadow"
        }),
        // 分类栏
        chanCategory(id){
            this.categoryId=id;
            this.onSearch(this.searchVal)
        },
        // 价格排序
        chanPrice(value){
            this.sort="price";
            this.order=value;
            this.onSearch(this.searchVal)
        },
        // 回车
        onSearch(value){
            
            this.bolckShow=3
            getGoodsList({
            keyword:value,      //输入的值

            // 细化搜索请求,为后面的条件做准备
            order: this.order,   //排序
            sort: this.sort,      //按id或价格排序
            categoryId:this.categoryId     //分类id
        }).then(res=>{
            let {goodsList,filterCategory}=res.data
            this.goodsList=goodsList
            // 有时候后端给的数据和我们需要的格式不一样,需要把数据处理成我们需要的格式
            let newArr=filterCategory.map(item=>{
                return {text:item.name,value:item.id,checked:item.checked}
            })
            this.filterCategory=newArr
        })
        },
        // 取消
        onCancel(){
            this.$router.go(-1)
            this.chanShadow(false)
        },
        onInput(val){
            // 防抖,每次操作时判断定时器启动了没有,如果启动了,就先清除定时器,保证同一时间只能存在一个定时器
            if(this.timer){
                clearTimeout(timer)
            }
            this.timer=setTimeout(() => {
                // 点击搜索时切换页面
                this.bolckShow=2
                // 发送请求
                getTipsData({
                    keyword:val
                }).then(res=>{
                    this.serachlist=res.data
                    }
                )
            }, 500);
            
        },
        // 点击标签跳转
        tagClick(val){
            this.onSearch(val)
        },
    },
    created(){
        // 请求历史记录.热门搜索,errno==0 判断请求是否成功
        getHishotData().then(res=>{
               let {defaultKeyword,hotKeywordList,historyKeywordList} = res.data

               this.placeVal=defaultKeyword.keyword
               this.hotKeywordList=hotKeywordList
               this.historyKeywordList=historyKeywordList
            
        })
    },
    components:{
        HistoryHot,SerachTips,SerachResult
    }
}
</script>
 
<style lang = "less" scoped>
    .search-popup{
        position: absolute;
        width: 100%;
        min-height: 100%;
        background-color: #efefef;
        top: 0;
        font-size: 20px;
        z-index: 10;
    }
</style>